<!DOCTYPE html>
<html>
<head>
    <meta CHARSET="utf-8"/>
    <title>Battle without end</title>
    <meta CONTENT="text/html; charset=utf-8" http-equiv="content-type"/>
    <script SRC="./jquery-1.8.0.min.js"></script>
  
    <script>
        $(document).ready(function () {
            $("input").each(function () {
                if ($(this).attr('name')) {
                    $(this).before($(this).attr('name'))
                }
            })
            $("select").each(function () {
                if ($(this).attr('name')) {
                    $(this).before($(this).attr('name'))
                }
            })
            $(".button").click(function () {
                var route = $(this).prevAll('p').text()
                var url = route
                var args = {}
                $(this).parent('div').find("input").each(function () {
                    if ($(this).attr('name')) {
                        args[$(this).attr('name')] = $(this).val()
                    }
                })
                $(this).parent('div').find("select").each(function () {
                    if ($(this).attr('name')) {
                        args[$(this).attr('name')] = $(this).val()
                    }
                })
                console.log(args)
                $.post(url, args, function (data, status) {
                    console.log(data)
                }, "json")
            })
        })
    </script>
</head>
<body>
    <iframe src="game.html" name="iframe_a" width="100%" height="700px"></iframe>
      <style type="text/css">
        * {
            margin: 0 auto
        }
        iframe{
            display:block;
            clear: both
        }
        div {
            float: left;
            width: 180px;
            height: 120px;
            border: 2px solid #0f0

        }
        form {
            float: left;
            width: 250px;
            height: 200px;
            border: 2px solid #0f0

        }
        input {
            display: block;
            margin-left: 0px
        }
        select {
            display: block;
            margin-left: 0px
        }
        p {
            color: blue
        }

    </style>
    <div>
        <p>user/login</p>
        <INPUT name="username" TYPE="text">
        <INPUT name="password" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="登录"/>
    </div>
    <div>
        <p>user/logout</p>
        <INPUT class='button' TYPE="button" VALUE="退出"/>
    </div>

    <!--注册-->
    <div>
        <p>user/register</p>
        <INPUT name="username" TYPE="text">
        <INPUT name="password" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="注册"/>
    </div>

    <!--新建角色-->
    <div>
        <p>user/addPlayer</p>
        <INPUT name="name" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="新建角色"/>
    </div>
    <!--删除角色-->
    <div>
        <p>player/delPlayer</p>
        <INPUT class='button' TYPE="button" VALUE="删除角色"/>
    </div>
    <!--角色升级-->
    <div>
        <p>player/lvlPlayer</p>
        <INPUT class='button' TYPE="button" VALUE="角色升级"/>
    </div>
    <!--角色升级通过exp-->
    <div>
        <p>player/lvlPlayerByexp</p>
        <INPUT class='button' TYPE="button" VALUE="角色升级通过exp"/>
    </div>
    <!--选择地图-->
    <div>
        <p>player/selectMap</p>
        <INPUT name="mapId" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="选择地图"/>
    </div>
    <!--战斗-->
    <div>
        <p>player/battleOnMap</p>
        <INPUT class='button' TYPE="button" VALUE="战斗"/>
    </div>
    <!--获取角色-->
    <div>
        <p>player/getPlayer</p>
        <INPUT class='button' TYPE="button" VALUE="获取角色"/>
    </div>
    <!--获取角色背包-->
    <div>
        <p>player/getPlayerBag</p>
        <INPUT class='button' TYPE="button" VALUE="角色背包"/>
    </div>
    <!--获取角色战斗记录-->
    <div>
        <p>player/getFightRecord</p>
        <INPUT class='button' TYPE="button" VALUE="角色战斗记录"/>
    </div>
    <!--获取商品-->
    <div>
        <p>service/merchant</p>
        <INPUT class='button' TYPE="button" VALUE="获取商品"/>
    </div>
    <!--购买商品-->
    <div>
        <p>service/buy</p>
        <INPUT name="commodityId" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="购买商品"/>
    </div>
    <!--出售物品-->
    <div>
        <p>service/sell</p>
        <INPUT name="commodityId" TYPE="text">
        <INPUT name="number" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="出售物品"/>
    </div>
    <!--解印装备-->
    <div>
        <p>service/relieve</p>
        <INPUT name="equipmentid" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="解印装备"/>
    </div>
    <!--替换装备-->
    <div>
        <p>service/equip</p>
        <INPUT name="equipmentid" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="替换装备"/>
    </div>
    <!--卸下装备-->
    <div>
        <p>service/unload</p>
        <INPUT name="part" TYPE="text">
        <INPUT class='button' TYPE="button" VALUE="卸下装备"/>
    </div>
</body>
</html>